<template>
  <lay-layer v-model="visible" :shade="true" :shadeClose="false" shadeOpacity="0.2" :area="['500px', '500px']" :success="init" :btn="action">
    <div style="padding: 20px">
        <lay-form :model="editRoleBo" ref="formRef">
          <lay-form-item label="角色名" prop="roleName" required>
            <lay-input v-model="editRoleBo.roleName"></lay-input>
          </lay-form-item>
          <lay-form-item label="角色代码" prop="roleCode" required>
            <lay-input v-model="editRoleBo.roleCode" :disabled="true"></lay-input>
          </lay-form-item>
          <lay-form-item label="描述" prop="note">
            <lay-textarea v-model="editRoleBo.note" placeholder="请输入描述" allow-clear></lay-textarea>
          </lay-form-item>
        </lay-form>
    </div>
  </lay-layer>
</template>
<script setup lang="ts">
import {ref} from 'vue'
import {editRole,detailRole} from '@/api/module/role'
import useFxwForm from "@/hooks/useFxwForm";

const {changeVisible,visible,toReset} = useFxwForm()

const props = defineProps({
  id: {
    type: Number,
    default: 0
  }
});

const formRef = ref();

const emit = defineEmits(['refreshParent'])

const editRoleBo = ref({
  id: 0,
  roleName: '',
  roleCode: '',
  note:''
})

const init = ()=> {
  detailRole(props.id).then(res => {
    editRoleBo.value = res.data;
  })
}

const action = ref([
  {
    text: "确认",
    callback: () => {
      editRole(editRoleBo.value).then(res=>{
        if (res.code === 200) {
          emit('refreshParent')
          toReset(formRef)
          changeVisible();
        }
      })
    }
  },
  {
    text: "取消",
    callback: () => {
      changeVisible();
    }
  }
])

defineExpose({
  changeVisible
})

</script>

<style scoped>


</style>